<template>
  <table>
    <thead>
      <tr>
        <th rowspan="2" v-for="(value, index) in props.tableList" :key="index">
          {{ value.thName }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(valCenten, indexs) in props.tableCenten" :key="indexs">
        <!-- <td rowspan="2" v-for="(value, i) in props.tableList" :key="i">
          {{ valCenten.number }}
        </td> -->
        <td rowspan="2">
          {{ valCenten.name }}
        </td>
        <td rowspan="2">
          {{ valCenten.city }}
        </td>
        <td rowspan="2">
          {{ valCenten.focus != "" ? valCenten.focus : 0 }}
        </td>
        <td rowspan="2">
          {{ valCenten.Branch != "" ? valCenten.Branch : 0 }}
        </td>
        <td rowspan="2">
          {{ valCenten.Satisfaction != "" ? valCenten.Satisfaction : 0 }}
        </td>
        <td rowspan="2">
          {{ valCenten.lastTwo != "" ? valCenten.lastTwo : 0 }}
        </td>
        <td rowspan="2">
          {{ valCenten.last != "" ? valCenten.last : 0 }}
        </td>
        <!-- <td rowspan="2">
          {{ valCenten.cloudWall }}
        </td> -->
      </tr>
    </tbody>
  </table>
</template>
<script setup>
import {
  ref,
  reactive,
  computed,
  defineProps,
  onMounted,
  watch,
  nexttick,
} from "vue";
const props = defineProps({
  tableList: {
    type: Array,
  },
  tableCenten: {
    type: Array,
  },
});

onMounted(() => {
  // console.log(props.tableCenten);
});
</script>
<style lang='less' scoped>
table {
  display: block;
  height: 100%;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  cursor: default;
  border: 1px solid rgba(2, 140, 218, 0.5);
}

tbody {
  display: block;
  height: 82%;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  cursor: default;
  overflow-y: scroll;
  overflow-x: hidden;
}
thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  height: 18%;
  height: 18%;
}
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  // height: 12.4%;
  height: 14.2%;
  width: calc(100% + 2px);
  border-bottom: 1px solid rgba(2, 140, 218, 0.5);
}
tbody tr:last-child {
  border: none;
}
thead tr {
  height: 100%;
  display: table;
  width: 100%;
  table-layout: fixed;
}
table tbody {
  width: 100%;
}

table thead th {
  padding: 0;
  min-width: 50px;
  border-bottom: 1px solid rgba(2, 140, 218, 0.5);
  font-size: 13px;
  color: #028cda;
}
table tbody td {
  min-width: 50px;
  text-align: center;
  font-size: 12px;
  color: #bac6cc;
  word-break: break-all;
  word-wrap: break-word;
}
::-webkit-scrollbar {
  width: 2px;
  height: 6px;
  background-color: transparent;
}
/*定义滚动条轨道内阴影+圆角*/
::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px #bfa; */
  border-radius: 10px;
  background-color: #222837;
}
/*定义滑块内阴影+圆角*/
::-webkit-scrollbar-thumb {
  width: 1px;
  height: 10px;
  border-radius: 10px;
  background-color: #028cda;
}
</style>
